<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
<nz-card>
  <nz-tabset [nzTabBarExtraContent]="extraTemplete" (nzSelectChange)="change($event)">
    <nz-tab nzTitle="全部"></nz-tab>
    <nz-tab nzTitle="未还款"></nz-tab>
    <nz-tab nzTitle="已还款"></nz-tab>
    <nz-tab nzTitle="已结清"></nz-tab>
    <nz-tab nzTitle="已拖车"></nz-tab>
  </nz-tabset>
  <ng-template #extraTemplete>
     <button nz-button (click)="back()"><i class="anticon anticon-rollback"></i>转到订单列表</button>
  </ng-template>

  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
      <nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-range-picker placeholder="选择日期" name="cdate" [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="q.dateRange"
              (ngModelChange)="dateChange($event)"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="输入客户姓名" [(ngModel)]="q.cusName" name="cusName">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="输入订单编号" [(ngModel)]="q.orderNo" name="orderNo">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <!--<nz-col nzMd="4" nzSm="24">-->
        <!--<nz-form-item>-->
          <!--<nz-form-control>-->
            <!--<input type="text" nz-input placeholder="车辆信息" [(ngModel)]="q.orderInfo" name="orderInfo">-->
          <!--</nz-form-control>-->
        <!--</nz-form-item>-->
      <!--</nz-col>-->
        <nz-col nzMd="3" nzSm="24">
            <button nz-button type="button" [nzType]="'primary'" class="mx-sm" (click)="st.load(1, q)">{{'search' | translate}}</button>
        </nz-col>
        <nz-col nzMd="3" nzSm="24">
          <button nz-button type="button" [nzType]="'primary'" class="mx-sm" (click)="alldelete()">批量删除</button>
      </nz-col>
    </nz-row>
  </form>
</nz-card>

<simple-table #st
    [columns]="columns"
    [data]="url"
    [ps]="ps"
    [extraParams]="q"
    [resReName]="{ total: 'total', list: 'data'}"
    [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
    toTopInChange
    [showTotal]="true"
    [showPagination]="true"
    [showSizeChanger]="true"
    [scroll]="{  x: '1300px' }"
    (checkboxChange)="checkboxChange($event)"
  >
    <!--<ng-template st-row="img" let-i>-->
      <!--<span *ngIf="!i.img" style="color: lightgrey; font-size: 12px;">无图片</span>-->
      <!--<a><img *ngIf="i.img" (click)="showImage(imgSuffix + i.img)" [src]="imgSuffix + i.img" width="32px" style=" max-height: 32px;"/></a>-->
    <!--</ng-template>-->

    <!--<ng-template st-row="isCm" let-i>-->
        <!--{{i.isCm === '0' ? '非定制' : '定制'}}-->
    <!--</ng-template>-->
    <!--<ng-template st-row="isAd" let-i>-->
      <!--{{i.isAd === '0' ? '普通款' : '广告款'}}-->
    <!--</ng-template>-->
</simple-table>

<nz-card nzTitle="还款"*ngIf="showPl">
  <form nz-form>
      <nz-form-item>
          <nz-form-label nzSpan="2" nzRequired>状态</nz-form-label>
          <nz-form-control nzSpan="4">
            <nz-select style="" [(ngModel)]="product.bpmStatus" name="bpmStatus" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
              <nz-option [nzLabel]="bpmStatu.text" [nzValue]="bpmStatu.value" *ngFor="let bpmStatu of bpmStatus"></nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-label nzSpan="2" nzRequired>实际还款金额</nz-form-label>
          <nz-form-control nzSpan="4">
            <input   nz-input [(ngModel)]="product.payAmount" name="payAmount">
          </nz-form-control>

          <nz-form-label nzSpan="2" nzRequired>实际还款日期</nz-form-label>
          <nz-form-control nzSpan="4">
            <nz-date-picker nzFormat="yyyy-MM-dd" name="fxjOut59" [(ngModel)]="product.fxjOut59"></nz-date-picker>
          </nz-form-control>

          <nz-form-label nzSpan="2" >逾期天数</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.fxjOut58" name="fxjOut58">
          </nz-form-control>

      </nz-form-item>
      <nz-form-item>

          <nz-form-label nzSpan="2" >订单编号</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.orderNo" name="orderNo">
          </nz-form-control>
    
          <nz-form-label nzSpan="2" >客户姓名</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.cusName" name="cusName">
          </nz-form-control>
    
          <!--<nz-form-label nzSpan="2" >车辆信息</nz-form-label>-->
          <!--<nz-form-control nzSpan="4">-->
            <!--<input   readonly="readonly" nz-input [(ngModel)]="product.orderInfo" name="orderInfo">-->
          <!--</nz-form-control>-->
    
          <nz-form-label nzSpan="2">应还日期</nz-form-label>
          <nz-form-control nzSpan="4">
            <nz-date-picker nzFormat="yyyy-MM-dd" name="refDate" [(ngModel)]="product.refDate"></nz-date-picker>
          </nz-form-control>
    
          <nz-form-label nzSpan="2">期数</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.refPeriod" name="refPeriod">
          </nz-form-control>
    
          <nz-form-label nzSpan="2" >总期数</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.refTotalPeriod" name="refTotalPeriod">
          </nz-form-control>
    
    
          <nz-form-label nzSpan="2" >应还本金</nz-form-label>
          <nz-form-control nzSpan="4">
          <input readonly="readonly" nz-input [(ngModel)]="product.refFbenjin" name="refFbenjin">
          </nz-form-control>
    
    
          <nz-form-label nzSpan="2" >应还金额</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.refAmount" name="refAmount">
          </nz-form-control>
    
    
          <nz-form-label nzSpan="2" >应还利息</nz-form-label>
          <nz-form-control nzSpan="4">
            <input readonly="readonly" nz-input [(ngModel)]="product.refLixi" name="refLixi">
          </nz-form-control>
    
          <nz-form-label nzSpan="2" >剩余本金</nz-form-label>
          <nz-form-control nzSpan="4">
            <input  readonly="readonly" nz-input [(ngModel)]="product.refSybenjin" name="refSybenjin">
          </nz-form-control>
    
          <nz-form-label nzSpan="2" nzRequired>备注</nz-form-label>
          <nz-form-control nzSpan="4">
            <input nz-input [(ngModel)]="product.reMark" name="reMark">
          </nz-form-control>
    
        </nz-form-item>
        <div style="display:block;">
          <!-- <button nz-button type="primary" nzType="primary" (click)="save()" style="width: 300px;margin: 0 auto;display: block;">保存</button> -->
          <div (click)="save()" style="width: 300px;height: 40px;letter-spacing: 20px;text-align: center;background: #1890ff;color: white;line-height: 40px;margin: 0 auto;border-radius: 5px;cursor: pointer;">保     存</div>
        </div>
        <!-- <footer-toolbar errorCollect> -->
          
        <!-- </footer-toolbar> -->
  </form>
</nz-card>



<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>

</nz-spin>
